<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>昭平风景</title>
    <script src="js/tailwindcss.js"></script>
    <script src="js/swiper.js"></script>
    <link href="css/global.css" rel="stylesheet" lang="css">
</head>
<body>

<!--导航部分-->
<header class="h-[64px] w-full bg-white border-b border-gray-300/40 z-50 sticky top-0">
    <div class="max-w-7xl mx-auto w-full flex  items-center justify-between h-full">
        <div class="flex items-center gap-x-6">
            <span class="font-bold text-2xl">There is ZhaoPing</span>
            <nav class="hidden md:block">
                <ul class="list-none flex items-center gap-x-4">
                    <li>
                        <a href="index.html">首页</a>
                    </li>
                    <li class="group  ">
                        <a  class="group-hover:hidden">新闻</a>
                        <ul class="hidden    group-hover:block ">
                            <li><a href="http://www.zpol.cn/xw">本地新闻</a></li>
                            <li><a href="https://www.cctv.com/">国内新闻</a></li>
                            <li><a href="https://news.cctv.cn/world/">国际新闻</a></li>
                        </ul>
                    </li>
                    <li class="group  ">
                        <a  class="group-hover:hidden">风景</a>
                        <ul class="hidden    group-hover:block ">
                            <li><a href="view.html">自然风光</a></li>
                            <li><a href="renwen.html">人文景观</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="foods.html">风味</a>
                    </li>
                </ul>
            </nav>
        </div>
        <a class="px-6 py-2 bg-blue-500 text-white rounded-full" href="message.html">留言</a>
    </div>
</header>

<!--本页内容区-->
<section class="w-8/12 m-auto overflow-hidden">
    <div class="flex flex-col text-center ">
    <img
            class="w-full"
            src="images/nature/nsch.jpg"
            alt=""
    />
    <span class="py-5 text-3xl ">南山茶海</span>
    <span class="py-5 text-xl ">南山茶海景区位于昭平县城南，总规划面积为3平方公里，约4500亩。它以旖旎的自然风光称绝，
        以盛产古今名茶闻名。景区高处海拔约1200米，群山环抱，常年云雾缭绕，登到高处观景平台，可俯瞰茶园，根据时节变化伴有
        野花、彩叶点缀，构建成的美景宛如画卷，令人流连忘返。现打造一个集康体运动、休闲养生、主题度假、研学体验、观光摄影
        五大核心功能于一体的综合性旅游度假区。</span>
    </div>
<!--    4小图-->
    <div class="w-full flex flex-row justify-center mt-8">
        <div class=" flex flex-col mx-12 text-center  text-xl ">
        <img
                class="w-[230px] h-[150px]"
                src="images/nature/nsch1.jpg"
        />
        <span class="py-5">南山茶海</span>
        </div>

        <div class=" flex flex-col mx-12 text-center  text-xl ">
            <img
                    class="w-[230px] h-[150px]"
                    src="images/nature/nsch2.jpg"
            />
            <span class="py-5">南山茶海</span>
        </div>

        <div class=" flex flex-col mx-12 text-center  text-xl ">
            <img
                    class="w-[230px] h-[150px]"
                    src="images/nature/nsch3.jpg"
            />
            <span class="py-5">南山茶海</span>
        </div>

        <div class=" flex flex-col mx-12 text-center  text-xl ">
            <img
                    class="w-[230px] h-[150px]"
                    src="images/nature/nsch4.jpg"
            />
            <span class="py-5">南山茶海</span>
        </div>
    </div>
</section>

<!--底部链接导航-->
<section class="max-w-7xl mx-auto my-10">
    <div class="flex justify-start gap-6">
        <div class="font-bold text-2xl text-gray-500 ">友情链接</div>
        <div class="p-2 flex items-center gap-4 flex-wrap">
            <a href="https://www.ylu.edu.cn/index.htm">玉林师范学院</a>
            <a href="http://webui.lw1001.cn/">原演示地址(视频服务器已关闭)</a>
        </div>
    </div>

</section>

<footer class="h-[64px] w-full">
    <div class="flex max-w-7xl mx-auto h-full justify-center gap-x-2 items-center">
        <span>202306062127</span>
        <strong>梁伟明</strong>
        <span>2023上学年WEBUI期末考试</span>
    </div>
</footer>
</body>
</html>
